<template>
    <div>
        <header class="pr white" style="padding: 45px 0px 40px;">
            <img src="../../assets/images/7.jpg" class="displayB centerauto shadowB" style="max-width: 70%;margin: 0px auto;padding: 10px;background: #fff;" />
        </header>
        <van-cell-group>
            <p class="wen_bg"></p>
            <van-field required v-model="u_bank_type" readonly :disabled="isreadonly" label="银行名称：" placeholder="请选择" @click="chooseBank = true" />
            <van-field required v-model="form.u_bank_card_code" :readonly="isreadonly" label="银行卡号：" placeholder="请输入" />
            <van-field required v-model="form.u_name_bank" :readonly="isreadonly" label="开户人姓名：" placeholder="请输入" />
            <van-field required v-model="form.u_bank_phone" :readonly="isreadonly" label="开户手机号：" placeholder="请输入" />
            <p class="wen_bg" style="margin-top: 30px;"></p>
        </van-cell-group>
        <div class="text-center margin_t50" v-show="isShow">
            <van-button type="primary" class="width_80p btn_size_40" @click="bindFun">绑 定</van-button>
        </div>
        <!-- 选择银行 -->
        <van-popup v-model="chooseBank" position="bottom">
            <van-picker show-toolbar :columns="columns" @confirm="onConfirm" @cancel="onCancel" />
        </van-popup>
    </div>
</template>
<script>
    import { isvalidPhone, isvalidTel, checkEmail, checkIdcard } from '@/assets/js/validate.js'
    import '@/assets/css/main.css'
    export default {
        data(){
            return{
                isType: '1',
                u_bank_type: '',
                form: {
                    'u_bank_type': '',
                    'u_bank_card_code': '',
                    'u_name_bank': '',
                    'u_bank_phone': '',
                },
                isShow: true,  //是否可以绑定
                chooseBank: false,  //
                list: [
                    {'name': '工商银行','id': 1},
                    {'name': '农业银行','id': 2},
                    {'name': '中国银行','id': 3},
                    {'name': '建设银行','id': 4},
                    {'name': '交通银行','id': 5},
                ],
                columns: ['工商银行','农业银行','中国银行','建设银行','交通银行'],
                isreadonly: false,
            }
        },
        methods: {
            onConfirm(value, index) {
                this.u_bank_type = value;
                this.form.u_bank_type = parseInt(index) + 1;
                this.chooseBank = false;  //关闭选择器
            },
            onCancel() {
                this.chooseBank = false;  //关闭选择器
            },
            init(){
                var _this = this;

                this.$httpGet('/api/index/Personal_center/getuserinfobyuid',{
                    'u_id': window.localStorage.u_id,
                }).then(response => {
                    
                    if(response.code == 200){
                        
                        if(response.msg.u_binding_status == 1){  //未绑定
                            _this.isShow = true;
                            _this.isreadonly = false;
                        }else if(response.msg.u_binding_status == 2){  //已绑定
                            _this.isShow = false;
                            _this.isreadonly = true;
                        }
                        
                        _this.form.u_bank_type = response.msg.u_bank_type;
                        if(response.msg.u_bank_type == 1){
                            _this.u_bank_type = '工商银行';
                        }else if(response.msg.u_bank_type == 2){
                            _this.u_bank_type = '农业银行';
                        }else if(response.msg.u_bank_type == 3){
                            _this.u_bank_type = '中国银行';
                        }else if(response.msg.u_bank_type == 4){
                            _this.u_bank_type = '建设银行';
                        }else if(response.msg.u_bank_type == 5){
                            _this.u_bank_type = '交通银行';
                        }
                        _this.form.u_bank_card_code = response.msg.u_bank_card_code;
                        _this.form.u_name_bank = response.msg.u_name_bank;
                        _this.form.u_bank_phone = response.msg.u_bank_phone;

                    }else{
                        _this.$toast(response.msg);
                    }

                })
            },
            bindFun(){
                var _this = this;

                if(!_this.form.u_bank_type){
                    _this.$toast('请输入银行名称');
                    return;
                }
                if(!_this.form.u_bank_card_code){
                    _this.$toast('请输入银行卡号');
                    return;
                }
                if(!_this.form.u_name_bank){
                    _this.$toast('请输入开户人姓名');
                    return;
                }
                if(!_this.form.u_bank_phone){
                    _this.$toast('请输入开户手机号');
                    return;
                }else{
                    if(!isvalidPhone(_this.form.u_bank_phone)){
                        _this.$toast('请输入正确的手机号');
                        return;
                    }
                }
                
                this.form.u_id = window.localStorage.u_id;

                this.$httpPost('/api/index/Personal_center/userBinding',this.form).then(response => {
                    
                    if(response.code == 200){

                        _this.$toast(response.msg);
                        _this.isShow = false;
                        setTimeout(() => {
                            _this.$router.push({
                                path: '/home',
                            });
                        }, 2000);
                    }else{
                        
                        _this.$toast(response.msg);
                    }

                });
            },
        },
        mounted(){
            this.init();
        },
    }
</script>